<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>缤格</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/binge.css"/>
    <script type="text/javascript" src="../../script/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../script/swiper.min.js"></script>
    <script type="text/javascript" src="../../script/mobile.js"></script>

    <script type="text/javascript">
        window['adaptive'].desinWidth = 750;
        window['adaptive'].baseFont = 28;
        window['adaptive'].maxWidth = 750;
        window['adaptive'].init();
    </script>
</head>

<body>
<!-- header -->
<div id="header" style="height: 0.9rem; background: #fff; position: fixed; top: 0;left: 0; width: 100%; z-index: 99">
    <div class="header" style="margin-bottom: 0; text-align: right;">
        <div class="head-back">
            <a href="javascript:void(0);" tapmode onclick="comeBack()" class="back-btn"></a>
        </div>
        <div class="head-title" style="width: calc(100% - 0.7rem)">
            <div class="search-circle">
                <input type="text" id="key" placeholder="请输入您想搜索的圈子名称">
                <button tapmode onclick="toSearchResult('circle_search_result')">搜索</button>
            </div>
        </div>
        <!--<div class="head-action">-->
        <!--<a href="javascript:void(0);" tapmode onclick="commonUrl('follow_school')" class="action-btn"></a>-->
        <!--</div>-->
    </div>
</div>
<!-- header end -->
<div class="header-h" style="padding-top: 1.4rem;"></div>
<div class="circle-kinds">
    <ul class="first_circle">
        <!--<li class="on"><a href="javascript:void(0);" tapmode onclick="commonUrl()">UNI</a></li>
        <li><a href="javascript:void(0);" tapmode onclick="commonUrl()">兴趣</a></li>
        <li><a href="javascript:void(0);" tapmode onclick="commonUrl()">高校</a></li>
        <li><a href="javascript:void(0);" tapmode onclick="commonUrl()">城市</a></li>-->
    </ul>
</div>

<!-- choose circle -->
<div class="choose-circle-kinds">
    <div class="circle-kinds-list">
        <ul class="second_circle">
            <!--<li class="on"><a href="javascript:void(0)" tapmode onclick="commonUrl()">体育</a></li>
            <li><a href="javascript:void(0)" tapmode onclick="commonUrl()">游戏游戏游戏游戏</a></li>
            <li><a href="javascript:void(0)" tapmode onclick="commonUrl()">音乐</a></li>
            <li><a href="javascript:void(0)" tapmode onclick="commonUrl()">生活</a></li>
            <li><a href="javascript:void(0)" tapmode onclick="commonUrl()">影视</a></li>-->
        </ul>
    </div>
    <div class="choose-circle-list">
        <ul id="circle_list">
            <!--<li class="circle-link" tapmode onclick="commonUrl('circle_index')">
                <div class="circle-img bg-cover" style="background: url('../../image/school-icon.png')"></div>
                <p class="multiline-ellipsis">娱乐娱乐娱乐</p>
            </li>-->


            <!--<li class="load-more">
                <div class="circle-more"></div>
                <p class="multiline-ellipsis">更多</p>
            </li>-->
        </ul>
    </div>
</div>
<!-- choose circle end -->


</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
    var first_id = '';//一级首位id
    var second_id = '';//一级首位id 二级首位id
    apiready = function () {

        setFixStatusBar(); //设置状态栏

        keybackListener()
        pop.loading();

        /*//下拉刷新
        dropDownRefresh(function () {
            getCircleIndex(1)
        });*/
        //获取一级列表以及一级下的二级，三级
        getCircleIndex(1)
    }


    //获取一级列表以及一级下的二级，三级
    function getCircleIndex(type, id) {
        var param = {};
        if (isDefine(id)) {
            param = {
                token: $api.getStorage('token'),
                type: type,//类型：1一级分类 2二级分类 3查找圈子
                id: id,//当type不为1的时候必须传入，上级id,查询对应的下级
            }
        } else {
            param = {
                token: $api.getStorage('token'),
                type: type,//类型：1一级分类 2二级分类 3查找圈子
            }
        }
        getAjax(Interface.find_circle, param, function (res) {
            var data = res.data;

            if (isDefine(data)) {
                var listHtml = '';

                //一级栏目
                if (type == 1) {
                    for (var i = 0; i < data.length; i++) {
                        if (i == 0) {
                            listHtml += '<li class="on" tapmode  data-id="' + data[i].id + '"><a href="javascript:void(0);">' + data[i].title + '</a></li>';
                            first_id = data[i].id;
                            getCircleIndex(2, first_id);
                        } else {
                            listHtml += '<li tapmode data-id="' + data[i].id + '"><a href="javascript:void(0);" >' + data[i].title + '</a></li>'
                        }
                    }

                    $(".first_circle").html(listHtml);

                } else if (type == 2) {
                    //二级栏目
                    for (var k = 0; k < data.length; k++) {
                        if (k == 0) {
                            listHtml += '<li class="on" tapmode data-id="' + data[k].id + '"><a href="javascript:void(0);">' + data[k].title + '</a></li>'
                            second_id = data[k].id;
                            getCircleIndex(3, second_id);
                        } else {
                            listHtml += '<li tapmode data-id="' + data[k].id + '"><a href="javascript:void(0);">' + data[k].title + '</a></li>'
                        }
                    }
                    $(".second_circle").html(listHtml);

                } else {
                    //圈子列表
                    for (var m = 0; m < data.length; m++) {
                        var circle_id = {"circle_id": data[m].id};
                        listHtml += '<li class="circle-link" tapmode onclick=\'commonUrl("circle_index",' + jsonChange(circle_id) + ')\'>' +
                            '                <div class="circle-img bg-cover" style="background: url(' + ajaxUrl + data[m].icon_path + ')"></div>' +
                            '                <p class="multiline-ellipsis">' + data[m].title + '</p>' +
                            '            </li>';
                    }
                    $("#circle_list").html(listHtml);
                }
            } else {
                if (type == 3) {
                    $("#circle_list").html(noData);
                }
            }
            pop.close()
        }, function (error) {
            if (type == 3) {
                $("#circle_list").html(noData);
            }
            pop.notice(error.msg)
            pop.close()
        })
    }


    //跳转搜索结果
    function toSearchResult(path) {
        var key = $('#key').val()
        if (key == '') {
            pop.notice('请输入查询圈子名称')
            return;
        }
        var param = {"key": key}
        commonUrl(path, param);

    }


    //一级切换
    $(".circle-kinds").on('click', 'li', function () {
        var _this = $(this);
        var li_id = _this.attr('data-id');
        _this.addClass('on').siblings('li').removeClass('on');

        getCircleIndex(2, li_id);
        $('.circle-kinds-list ul').animate({scrollTop: 0}, 500);//滚动条回到顶端
        $('.choose-circle-list ul').animate({scrollTop: 0}, 500);//滚动条回到顶端

    });

    //二级切换
    $(".circle-kinds-list").on('click', 'li', function () {
        var _this = $(this);
        var li_id = _this.attr('data-id');
        _this.addClass('on').siblings('li').removeClass('on');

        getCircleIndex(3, li_id);
        $('.choose-circle-list ul').animate({scrollTop: 0}, 500);//滚动条回到顶端

    });

    $(".choose-circle-kinds").height($(window).height() - $(".header-h").outerHeight(true)  - $(".circle-kinds").outerHeight(true))

</script>
